To set up an Eleventy (11ty) blog and host it on Cloudflare Pages, follow these three simple phases.

Phase 1: Local Setup

First, create your blog on your computer. Open your terminal and run these commands:

  1. Initialize your project:
    Bash
    mkdir my-11ty-blog && cd my-11ty-blog
    npm init -y
    npm install @11ty/eleventy --save-dev

  2. Create your first post:
    Create a file named index.md in your folder and add some content:
    Markdown
    ---
    title: My First Post
    ---
    # Hello World!
    This is my 11ty blog hosted on Cloudflare.

  3. Add a Build Script:
    Open package.json and add this line inside the "scripts" section:
    JSON
    "scripts": {
    "build": "npx @11ty/eleventy"
    }

---

Phase 2: Push to GitHub

Now, move your code to the cloud so Cloudflare can "see" it.

  1. Create a .gitignore file:
    In your project root, create a file named .gitignore and add:
    Plaintext
    node_modules/
    _site/

  2. Commit and Push:

    • Go to GitHub and create a new repository (keep it public or private, either works).
    • Run these commands in your terminal (replace the URL with your actual repo URL):

Bash
git init
git add .
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo-name.git
git push -u origin main

Phase 3: Connect to Cloudflare Pages

This is where the actual "hosting" happens.

  1. Log in to Cloudflare: Go to the Cloudflare Dashboard and navigate to Workers & Pages.
  2. Create a Project: Click Create > Pages > Connect to Git.
  3. Select Repository: Choose the GitHub repository you just pushed to.
  4. Configure Build Settings:
    • Framework preset: Choose Eleventy.
    • Build command: npm run build (or npx @11ty/eleventy).
    • Build output directory: _site.
  5. Deploy: Click Save and Deploy.

---

How the Workflow Looks

Once this is finished, your publishing process becomes incredibly simple:

  • To publish a new post: Just add a .md file to your folder.
  • To go live: Run git add, git commit, and git push.
  • Result: Cloudflare detects the push, builds the site, and updates your blog automatically in about 30 seconds.

Would you like me to show you how to add a "Layout" file so your blog doesn't look like a plain text document?